<template>
  <footer class="footer">
    <!-- 用定位将这个定位到中间,然后z-index为-1放在最下边,再给个边框就只会显示上半部分了 -->
    <div class="addbg"></div>
    <ul>
      <!-- 使用vue提供的路由声明式导航<router-link to=""></router-link>,来实现vue页面的跳转可在控制台中发现这个标签被渲染为了a标签,但是加上这个标签之后会影响我们之前页面布局,这时候我们可以使用这个vue标签自带的tag="标签"属性来避免这个问题的出现,这时候在控制台中发现就不会出现a标签了,而这个router-link作为了li的class属性名动态出现在里标签中了(意思就是点击哪个这个class就出现在哪个里边,或者也可以说是地址栏中出现的是哪个路由这个class就出现在对应的路由的li的中class="router-link-exact-active router-link-active"),这样也能够实现页面跳转,反正就是以下的这种格式就对了 -->
      <router-link to="/home" tag="li">
        <img :src=" $route.path === '/home' ? require('../lib/img/footer/detail.png') : require('../lib/img/footer/detail-unchecked.png')" alt="" srcset="" style="width:.25rem;height:.25rem">
        <p>明细</p>
      </router-link>
      <router-link to="/SelectionIcon" tag="li">
        <img :src=" $route.path === '/SelectionIcon' ? require('../lib/img/footer/chart.png') : require('../lib/img/footer/chart-unchecked.png')" alt="" srcset="" style="width:.25rem;height:.25rem">
        <p>图表</p>
      </router-link>
      <router-link to="/AddTo" tag="li">
        <!-- 外层加个div设置为圆,用于覆盖ui横的线条 -->
        <div class="add">
        <img src="../lib/img/footer/keep accounts.png" alt="" srcset="" style="width:.45rem;height:.45rem;margin-top:.08rem">
          <p>记账</p>
        </div>
      </router-link>
      <router-link to="/Community" tag="li">
        <img :src=" $route.path === '/Community' ? require('../lib/img/footer/community.png') : require('../lib/img/footer/community-unchecked.png')" alt="" srcset="" style="width:.25rem;height:.25rem">
        <p>社区</p>
      </router-link>
      <router-link to="/my" tag="li">
        <img :src=" $route.path === '/my' ? require('../lib/img/footer/my.png') : require('../lib/img/footer/my-unchecked.png')" alt="" srcset="" style="width:.25rem;height:.25rem">
        <p>我的</p>
      </router-link>
      <!-- <router-link v-if="!falguser" to="/login" tag="li">
        <span class="iconfont icon-wode4"></span>
        <p>未登录</p>
      </router-link>
      <router-link v-else to="/user" tag="li">
        <span class="iconfont"></span>
        <p>我的</p>
      </router-link> -->
    </ul>
  </footer>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {}
}
</script>
